<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>通用BS平台架构图</title>
  <script src="../js/html2canvas.min.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    
    body {
      background-color: #f5f7fa;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      position: relative;
    }
    
    .platform {
      width: 100%;
      background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
      border-radius: 15px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
    }
    
    .platform-title {
      text-align: center;
      margin-bottom: 5px;
      color: #2c3e50;
      font-size: 28px;
      font-weight: 600;
      position: relative;
      cursor: pointer;
      transition: all 0.3s;
      border: 10px solid #007bff;
      border-radius: 10px;
    }
    
    .platform-title:hover {
      color: #007bff;
    }
    
    .layers-container {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .layer {
      background: white;
      border-radius: 10px;
      padding: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s, box-shadow 0.3s;
      position: relative;
      overflow: hidden;
    }
    
    .layer:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    }
    
    .layer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: #007bff;
    }
    
    .layer-title {
      font-size: 18px;
      font-weight: 600;
      color: white;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px 12px;
      border-radius: 6px;
      background: #007bff;
      position: relative;
    }
    
    .layer-title span {
      display: flex;
      align-items: center;
    }
    
    .add-module-btn {
      position: absolute;
      right: 10px;
      background: rgba(255,255,255,0.2);
      border: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: white;
      font-weight: bold;
      transition: all 0.3s;
    }
    
    .add-module-btn:hover {
      background: rgba(255,255,255,0.4);
      transform: rotate(90deg);
    }
    
    .modules-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 10px;
    }
    
    .module {
      color: #333;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
      transition: all 0.3s;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      border: 1px solid #007bff;
    }
    
    .module:hover {
      transform: translateY(-3px);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
    
    .module::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0) 45%,
        rgba(255, 255, 255, 0.3) 48%,
        rgba(255, 255, 255, 0.3) 52%,
        rgba(255, 255, 255, 0) 55%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: rotate(30deg);
      transition: all 0.3s;
    }

    .module i{color: red;}
    
    .module:hover::after {
      left: 100%;
    }
    
    /* 下载按钮 */
    .download-btn {
      position: fixed;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
      border: none;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
      transition: all 0.3s;
      z-index: 100;
    }
    
    .download-btn:hover {
      transform: translateY(-50%) scale(1.1);
      box-shadow: 0 8px 20px rgba(0, 123, 255, 0.4);
    }
    
    .download-btn i {
      font-size: 24px;
    }
    
    /* 编辑模块的输入框 */
    .module-input {
      position: relative;
      width: 120px;
    }
    
    .module-input input {
      width: 100%;
      padding: 6px 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      font-size: 13px;
      outline: none;
    }
    
    /* 删除图标样式 */
    .delete-icon {
      position: absolute;
      top: 3px;
      right: 3px;
      color: white;
      display: none;
      cursor: pointer;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    .module:hover .delete-icon {
      display: block;
      opacity: 1;
    }
    
    /* 响应式设计 */
    @media (max-width: 768px) {
      .platform {
        padding: 20px 15px;
      }
      
      .modules-container {
        justify-content: center;
      }
      
      .module {
        font-size: 12px;
        padding: 5px 8px;
      }
      
      .download-btn {
        right: 15px;
        width: 40px;
        height: 40px;
        bottom: 20px;
        top: auto;
        transform: none;
      }
      
      .download-btn:hover {
        transform: scale(1.1);
      }
    }
  </style>
  <link rel="stylesheet" href="../css/all.min.css">
</head>

<body>
  <div class="platform" id="platform">
    <h1 class="platform-title" contenteditable="true">通用BS平台架构图</h1>
    
    <div class="layers-container">
      <!-- 表现层 -->
      <div class="layer">
        <h2 class="layer-title">
          <span contenteditable="true">表现层</span>
          <button class="add-module-btn" onclick="addModule(this)">+</button>
        </h2>
        <div class="modules-container">
          <div class="module" onclick="editModule(this)">
            Web前端
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            移动端
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            API文档
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            可视化大屏
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
        </div>
      </div>
      
      <!-- 网关层 -->
      <div class="layer">
        <h2 class="layer-title">
          <span contenteditable="true">网关层</span>
          <button class="add-module-btn" onclick="addModule(this)">+</button>
        </h2>
        <div class="modules-container">
          <div class="module" onclick="editModule(this)">
            API网关
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            负载均衡
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            鉴权中心
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            安全防护
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
        </div>
      </div>
      
      <!-- 应用层 -->
      <div class="layer">
        <h2 class="layer-title">
          <span contenteditable="true">应用层</span>
          <button class="add-module-btn" onclick="addModule(this)">+</button>
        </h2>
        <div class="modules-container">
          <div class="module" onclick="editModule(this)">
            用户中心
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            订单服务
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            支付服务
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            规则引擎
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            工作流引擎
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            通知中心
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
        </div>
      </div>
      
      <!-- 数据层 -->
      <div class="layer">
        <h2 class="layer-title">
          <span contenteditable="true">数据层</span>
          <button class="add-module-btn" onclick="addModule(this)">+</button>
        </h2>
        <div class="modules-container">
          <div class="module" onclick="editModule(this)">
            数据缓存
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            搜索服务
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            实时计算
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            数据分析
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
        </div>
      </div>
      
      <!-- 持久层 -->
      <div class="layer">
        <h2 class="layer-title">
          <span contenteditable="true">持久层</span>
          <button class="add-module-btn" onclick="addModule(this)">+</button>
        </h2>
        <div class="modules-container">
          <div class="module" onclick="editModule(this)">
            关系型数据库
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            NoSQL
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            时序数据库
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            文件存储
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
        </div>
      </div>
      
      <!-- 基础设施层 -->
      <div class="layer">
        <h2 class="layer-title">
          <span contenteditable="true">基础设施层</span>
          <button class="add-module-btn" onclick="addModule(this)">+</button>
        </h2>
        <div class="modules-container">
          <div class="module" onclick="editModule(this)">
            容器化
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            监控系统
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            日志系统
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
          <div class="module" onclick="editModule(this)">
            CI/CD
            <i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <button class="download-btn" onclick="downloadAsImage()">
    <i class="fas fa-download"></i>
  </button>
  
  <script>
    // 编辑模块
    function editModule(module) {
      const originalText = module.textContent.replace(/<i class="fas fa-times delete-icon"><\/i>/, '').trim();
      const inputHtml = `
        <div class="module-input">
          <input type="text" value="${originalText}">
        </div>
      `;
      
      module.innerHTML = inputHtml;
      const input = module.querySelector('input');
      // 检查是否可以聚焦
      if (document.hasFocus()) {
        input.focus();
      }
      
      // 失去焦点或按Enter确认编辑
      input.addEventListener('blur', function() {
        confirmEdit(module, originalText);
      });
      
      input.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          confirmEdit(module, originalText);
        }
      });
    }
    
    // 确认编辑
    function confirmEdit(module, originalText) {
      const input = module.querySelector('input');
      const newText = input ? input.value.trim() : '';
      
      if (newText) {
        module.innerHTML = `${newText}<i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>`;
        module.onclick = function() { editModule(this); };
      } else {
        module.innerHTML = `${originalText}<i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>`;
        module.onclick = function() { editModule(this); };
      }
    }
    
    // 添加新模块
    function addModule(btn) {
      const modulesContainer = btn.closest('.layer').querySelector('.modules-container');
      const newModule = document.createElement('div');
      newModule.className = 'module';
      newModule.innerHTML = `新模块<i class="fas fa-times delete-icon" onclick="deleteModule(this)"></i>`;
      newModule.onclick = function() { editModule(this); };
      modulesContainer.appendChild(newModule);
      editModule(newModule);
    }
    
    // 删除模块
    function deleteModule(icon) {
      const module = icon.closest('.module');
      module.remove();
    }
    
    // 下载为图片
    function downloadAsImage() {
      const platform = document.getElementById('platform');
      
      // 隐藏所有添加按钮
      const addButtons = platform.querySelectorAll('.add-module-btn');
      addButtons.forEach(btn => {
        btn.style.display = 'none';
      });
      
      // 临时禁用内容可编辑
      const editableElements = platform.querySelectorAll('[contenteditable="true"]');
      editableElements.forEach(el => {
        el.setAttribute('contenteditable', 'false');
        el.style.cursor = 'default';
      });
      
      // 使用html2canvas生成图片
      html2canvas(platform, {
        scale: 2, // 提高缩放比例以获得更高清的图片
        logging: false,
        useCORS: true,
        allowTaint: true
      }).then(canvas => {
        // 恢复添加按钮显示
        addButtons.forEach(btn => {
          btn.style.display = 'flex';
        });
        
        // 恢复内容可编辑
        editableElements.forEach(el => {
          el.setAttribute('contenteditable', 'true');
          el.style.cursor = 'text';
        });
        
        // 创建下载链接
        const link = document.createElement('a');
        link.download = platform.querySelector('.platform-title').textContent + '.png';
        link.href = canvas.toDataURL('image/png');
        link.click();
      });
    }
    
    // 处理键盘事件，使编辑更流畅
    document.addEventListener('keydown', function(e) {
      // 在可编辑标题中按Enter或ESC取消焦点
      if (e.target.hasAttribute('contenteditable') && (e.key === 'Enter' || e.key === 'Escape')) {
        e.preventDefault();
        e.target.blur();
      }
    });
  </script>
</body>

</html>    